<template>
  <van-config-provider :theme-vars="themeVars">
    <!-- 导航头 -->
    <van-nav-bar class="borderb" :fixed="true" :placeholder="true">
      <template #left>
        <van-icon name="wap-home-o" size=".6933rem" color="#505050" @click="router.push(`/`)" />
      </template>
      <template #title>
        <div style="font-size: 0.5333rem; height: 0.64rem; line-height: 0.64rem" @click="router.push(`/`)">
          网易严选
        </div>
      </template>
      <template #right>
        <van-space :size="'.48rem'">
          <van-icon name="search" size=".6933rem" color="#505050" @click="router.push(`/search`)" />
          <van-icon name="shopping-cart-o" size=".6933rem" color="#505050" @click="router.push(`/cart`)" />
        </van-space>
      </template>
    </van-nav-bar>
    <div class="cnatainer">
      <!-- 商品详情轮播 -->
      <van-swipe :autoplay="5000" class="mb-6">
        <van-swipe-item v-for="item in detailInfo?.skuInfo.skuImageList" :key="item.id">
          <van-image width="100%" height="100%" :src="item.imgUrl" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
      <!-- 特价活动栏 -->
      <div class="m-promBanner m-processBanner">
        <div class="bannerContent" style="background-color: rgb(250, 30, 50)">
          <div class="col1">
            <div class="head" style="color: rgb(255, 255, 255)">
              <span>囤货特价</span><span>｜</span>
              <div style="display: inline">
                <span>距结束</span>
                <div style="display: inline-block">
                  <van-count-down :time="time" format="DD天HH小时mm分ss秒" />
                </div>
              </div>
            </div>
            <div class="content content0">
              <div class="priceArea">
                <span class="currentPrice" style="color: rgb(255, 255, 255)"
                  ><span style="font-size: 0.36rem">¥</span>{{ detailInfo?.price
                  }}<span style="font-size: 0.4rem"></span></span
                ><span class="couterPrice">¥{{ (detailInfo?.price as number) + 500 }}</span>
              </div>
            </div>
          </div>
          <div><img class="logoUrl" src="https://yanxuan.nosdn.127.net/static-union/16710067081db06a.png" /></div>
        </div>
      </div>
      <!-- 商品详情 -->
      <div class="m-detailBaseInfo">
        <div class="priceInfo"></div>
        <div style="min-height: 1px" class="priceBox">
          <div class="spmcBanner">
            <div class="spmcPrice">
              <img class="iconUrl" src="//yanxuan.nosdn.127.net/08252a1e8acffc6e34e57e552bd1f5f2.png" /><span
                class="spmcDesc"
                >Pro会员叠加优惠，再省<span class="spmcEconomizePrice">¥1.9</span></span
              ><i class="icon-questionMark"></i>
            </div>
            <span class="spmcBtn">开通</span>
          </div>
        </div>
        <div class="baseInfo">
          <div class="info">
            <div class="name">{{ detailInfo?.skuInfo.skuName }}</div>
            <div class="simpleBrandInfo">
              <div class="preLogo preLogo1"></div>
              <img
                class="brandLogo"
                src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png"
              /><span class="title">网易严选</span>
            </div>
            <div class="desc">推荐理由</div>
          </div>
          <div class="comment single-line">
            <div class="wrap">
              <div class="info-wrap">
                <div class="num">99.9%</div>
                <div class="com">好评率</div>
              </div>
              <i class="u-icon u-address-right"></i>
            </div>
          </div>
        </div>
        <div class="rcmdBanner">
          <div class="angleTop"><span class="angleContent"></span></div>
          <ul>
            <li>
              <div class="key">1</div>
              <div class="recommendReason">优质加厚碳钢材质，静电喷涂，好清洁不易生锈</div>
            </li>
            <li>
              <div class="key">2</div>
              <div class="recommendReason">集中收纳，可推拉抽屉拿取方便</div>
            </li>
            <li>
              <div class="key">3</div>
              <div class="recommendReason">分层堆叠收纳，充分利用纵向空间</div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 邮费，购物返 -->
      <div style="border-top: 10px solid rgb(244, 244, 244)" class="popup2">
        <van-cell is-link @click="showPopupOne" title="邮费：满99包邮"></van-cell>
        <van-cell is-link @click="showPopupTwo">
          <template #title>
            <span class="custom-title">购物返：最高返</span>
            <span class="fontColor-red">4积分</span>
          </template>
        </van-cell>
        <van-popup
          v-model:show="showOne"
          closeable
          position="bottom"
          :style="{ height: '60%' }"
          :close-on-click-overlay="false"
        >
          <div class="title"><span class="txt">邮费</span></div>
          <div class="content">
            <div class="rule">
              <div class="ruleTitle">&nbsp;<span>&nbsp;</span>&nbsp;满99元免邮</div>
              <div class="ruleContent">
                本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
              </div>
            </div>
            <span></span>
          </div>
        </van-popup>
        <van-popup
          v-model:show="showTwo"
          closeable
          position="bottom"
          :style="{ height: '60%' }"
          :close-on-click-overlay="false"
        >
          <div class="title"><span class="txt">什么是购物返</span></div>
          <div class="content">
            <div class="rule">
              <div class="ruleTitle">&nbsp;<span>&nbsp;</span>&nbsp;关于购物返回馈金：</div>
              <div class="ruleContent">
                1. 回馈金是严选用以回馈用户的代币<br />2. 回馈金可与现金1:1抵扣使用<br />3. 回馈金使用无门槛，可叠加<br />4.
                购物即可返还回馈金，用户等级越高，返还比例越高<br />5.
                本月获取的回馈金，统一在次月25日23:59:59失效，请尽快使用<br />6. 可在个人中心--回馈金中查看回馈金资产<br />7.
                部分特殊商品和订单不支持返还回馈金，具体以回馈金的活动说明为准<br />8. 如有疑问，请联系严选在线客服
              </div>
            </div>
            <div class="rule">
              <div class="ruleTitle">&nbsp;<span>&nbsp;</span>&nbsp;关于购物返积分：</div>
              <div class="ruleContent">
                1. 用户在严选主站购物，确认收货后按商品售价的10%返购物积分<br />2.
                购物返积分数值精确到个位（小数点后全部舍弃，不进行四舍五入）<br />3.
                拼团/众筹/砍价/虚拟商品和礼品卡支付商品订单不支持返积分<br />4.
                购买礼品卡订单不返积分，礼品卡消费时，按照实际消费额度进行积分返赠<br />5.
                如商品订单完成后退货，则在退货流程发起后24小时内对该笔订单发放的积分数进行扣除<br />6.
                可在【帮助中心】-积分规则查看详细说明<br />7. 如有疑问，请联系严选在线客服
              </div>
            </div>
            <span></span>
          </div>
        </van-popup>
      </div>
      <!-- 选规格，配送，服务 -->
      <div style="border-top: 10px solid rgb(244, 244, 244)" class="popup3">
        <!-- 选规格 -->
        <van-cell is-link @click="showPopupThree" title="请选择规格数量"></van-cell>
        <nut-sku
          v-model:visible="base"
          :sku="data?.sku"
          :goods="data?.goods"
          :stepperMin="1"
          @changeStepper="changeStepper"
          :btnOptions="['buy', 'cart']"
          @selectSku="selectSku"
          @clickBtnOperate="clickBtnOperate"
        ></nut-sku>
        <van-field v-model="fieldValue" is-link readonly placeholder="请选择配送地址" @click="showFour = true">
          <template #label>
            <span class="custom-title">配送：</span>
          </template>
        </van-field>
        <van-popup v-model:show="showFour" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="showFour = false"
            @finish="onFinish"
          />
        </van-popup>
        <!-- 服务 -->
        <van-cell is-link @click="showPopupFive">
          <template #title>
            <div style="display: flex">
              <span class="custom-title">服务：</span>
              <div style="display: flex; margin-right: 15px">
                <div
                  style="width: 4px; height: 4px; background-color: #dd1a21; border-radius: 50%; margin: 10px 5px"
                ></div>
                <span class="fontColor-red" style="color: #333; font-size: 12px">严选自营</span>
              </div>
              <div style="display: flex; margin-right: 15px">
                <div
                  style="width: 4px; height: 4px; background-color: #dd1a21; border-radius: 50%; margin: 10px 5px"
                ></div>
                <span class="fontColor-red" style="color: #333; font-size: 12px">七天无忧退换</span>
              </div>
            </div>
            <div style="display: flex; margin-left: 42px">
              <div
                style="width: 4px; height: 4px; background-color: #dd1a21; border-radius: 50%; margin: 10px 5px"
              ></div>
              <span class="fontColor-red" style="color: #333; font-size: 12px">不享受学生优惠</span>
            </div>
          </template>
        </van-cell>
        <van-popup
          v-model:show="showFive"
          closeable
          position="bottom"
          :style="{ height: '60%' }"
          :close-on-click-overlay="false"
        >
          <div class="title"><span class="txt">服务</span></div>
          <div class="content">
            <div class="rule">
              <div class="ruleTitle">&nbsp;<span>&nbsp;</span>&nbsp; 严选自营</div>
              <div class="ruleContent">商品均为网易严选自营，品质保证</div>
            </div>
            <div class="rule">
              <div class="ruleTitle">&nbsp;<span>&nbsp;</span>&nbsp;7天无忧退换</div>
              <div class="ruleContent">
                顾客在收货之日起7天内保证商品完好、附件齐全的情况下，可发起无忧退换货，具体规则请参见帮助中心-退换货政策
              </div>
            </div>
            <div class="rule">
              <div class="ruleTitle">&nbsp;<span>&nbsp;</span>&nbsp;不享受学生折扣</div>
              <div class="ruleContent">该商品不支持享受学生特权优惠</div>
            </div>
            <span></span>
          </div>
        </van-popup>
      </div>
      <!-- 活动图轮播 -->
      <div class="dt-section dt-section-1" style="border-top: 10px solid rgb(233, 233, 233)">
        <van-swipe class="mb--5" :autoplay="3000" :show-indicators="false" height="100px">
          <van-swipe-item>
            <van-image
              width="100%"
              height="2.6667rem"
              src="https://yanxuan.nosdn.127.net/81ff91876da1aaed962d6d81f5302428.jpg?quality=75&type=webp&imageView&thumbnail=750x0"
            />
          </van-swipe-item>
          <van-swipe-item>
            <van-image
              width="100%"
              height="2.6667rem"
              src="https://yanxuan.nosdn.127.net/87bd3938e4764581dcf6db9aeabecafb.jpg?quality=75&type=webp&imageView&thumbnail=750x0"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 评价静态 -->
      <div class="userEvaluate" style="border-top: 10px solid rgb(233, 233, 233)">
        <van-cell is-link>
          <template #title>
            <span class="custom-title">用户评价(32442)</span>
            <span class="fontColor-red" style="margin-left: 135px">99.8%</span>
            <span>好评率</span>
          </template>
        </van-cell>
      </div>
      <!-- 商品详情图 -->
      <div class="dt-section dt-section-1" style="border-top: 10px solid rgb(233, 233, 233)">
        <div class="lazy-component-wrapper">
          <div class="m-detailHtml">
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/8bb738d18a0e780f19fb3d0a72721e28.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/8bb738d18a0e780f19fb3d0a72721e28.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/44b8aed5c8e38811ef03983fb38d3cd9.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/44b8aed5c8e38811ef03983fb38d3cd9.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/9e423563c7175f8791c1146e70607e69.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/9e423563c7175f8791c1146e70607e69.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/4dd34fc1752dfde9c370ac55140f69ec.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/4dd34fc1752dfde9c370ac55140f69ec.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/bea58fadfdbe84116fa2ebab23c15120.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/bea58fadfdbe84116fa2ebab23c15120.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/8852c52916b4b462aa62abfbca061a39.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/8852c52916b4b462aa62abfbca061a39.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/16e62ebe1cbfa284e452ea59061939e6.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/16e62ebe1cbfa284e452ea59061939e6.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/65378ab799a1c64dc4a75a26a67f5a19.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/65378ab799a1c64dc4a75a26a67f5a19.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/d08c803b6703ce13228d1f6ccb0f585f.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/d08c803b6703ce13228d1f6ccb0f585f.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/170803584baa235666dea6b0665099bf.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/170803584baa235666dea6b0665099bf.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/e1f0592eaba46dd8f575f58862d03fe3.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/e1f0592eaba46dd8f575f58862d03fe3.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/e265a32e45b6edaf8758dc8aa2e9d959.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/e265a32e45b6edaf8758dc8aa2e9d959.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/90e537ba9ac7d1e4ed879b0e3eabaaf0.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/90e537ba9ac7d1e4ed879b0e3eabaaf0.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/088bc22e5dff3bb6d2658e124a9e7700.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/088bc22e5dff3bb6d2658e124a9e7700.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/fe943e2003d5b6a67f002b46ea271a6f.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/fe943e2003d5b6a67f002b46ea271a6f.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/d142191bf0c62201dca36b692c7e109f.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/d142191bf0c62201dca36b692c7e109f.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/487eb7c14f5320fb1d7291d19588c31a.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/487eb7c14f5320fb1d7291d19588c31a.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/39a29daba57e7ce3994b64d038b96dca.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/39a29daba57e7ce3994b64d038b96dca.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/64dce6dbedf83afa3f6872e520785267.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/64dce6dbedf83afa3f6872e520785267.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/79f35cc34943c8cc2c60e1b48b479bf3.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/79f35cc34943c8cc2c60e1b48b479bf3.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/7a8457851fc8b77e0ab13b97e2cfbdb0.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/7a8457851fc8b77e0ab13b97e2cfbdb0.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/8bdffe98ea7ad38dd77b225abeac0c07.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/8bdffe98ea7ad38dd77b225abeac0c07.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/aa5d696a4f126b04336b697c9371150a.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/aa5d696a4f126b04336b697c9371150a.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/eb663aad2c54fd6b3c05f9a7ef638d72.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/eb663aad2c54fd6b3c05f9a7ef638d72.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/f1e696cc17b1937c7c5da55448a39cce.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/f1e696cc17b1937c7c5da55448a39cce.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/92b94d02997e969035d08b23a2e58ef5.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/92b94d02997e969035d08b23a2e58ef5.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/b068da3a5eb6bf51e5bea5b87d0a8f3e.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/b068da3a5eb6bf51e5bea5b87d0a8f3e.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/0dbd836d846c65a8e754324eae8d10a8.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/0dbd836d846c65a8e754324eae8d10a8.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/033de6840b80a3c41d5c50de4d791828.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/033de6840b80a3c41d5c50de4d791828.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/9fc2645cfe60d5935f5f1cf365758278.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/9fc2645cfe60d5935f5f1cf365758278.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/f7ac9c368405876cc192727ee70e4f3a.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/f7ac9c368405876cc192727ee70e4f3a.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/40d241b9ccec5a05d65a125b10be45be.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/40d241b9ccec5a05d65a125b10be45be.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/523684f8b2246c44218d11ddfdf0de39.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/523684f8b2246c44218d11ddfdf0de39.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/f918e7f7a9c5747000644ef6b0e6b889.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/f918e7f7a9c5747000644ef6b0e6b889.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/e3179e790b622e9a05a4c1f0bb2894c5.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/e3179e790b622e9a05a4c1f0bb2894c5.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/7828f1891923a55799596e9ffa041386.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/7828f1891923a55799596e9ffa041386.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/0328429608dc00bde278f0396e48bb9f.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/0328429608dc00bde278f0396e48bb9f.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/b39bbd9d75e8063da3c76050bc67264d.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/b39bbd9d75e8063da3c76050bc67264d.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/65407cbd4ef3e42e9ab51fa41080fc3d.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/65407cbd4ef3e42e9ab51fa41080fc3d.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/6c3060e1455dba8d5181d115cd803d2f.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/6c3060e1455dba8d5181d115cd803d2f.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/7fca3ffa6deac4b448ba61e722f401cb.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/7fca3ffa6deac4b448ba61e722f401cb.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/09ae96e7dae5029abe1d986832895796.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/09ae96e7dae5029abe1d986832895796.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/918f65e03837aa825b1ab11b75733d8e.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/918f65e03837aa825b1ab11b75733d8e.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/cf10e8d661b289efe4785242675311ce.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/cf10e8d661b289efe4785242675311ce.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/6585c0dfe79442f54dda7bb26378c38e.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/6585c0dfe79442f54dda7bb26378c38e.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/003b59ef18da6554fbae10217bbf4768.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/003b59ef18da6554fbae10217bbf4768.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/18eab64ea0c14a457994ece55c5b2019.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/18eab64ea0c14a457994ece55c5b2019.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/4aeb3b5f85ce6133e573001adb20acdf.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/4aeb3b5f85ce6133e573001adb20acdf.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/2782ce9277a83e0c16db5440e08518ec.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/2782ce9277a83e0c16db5440e08518ec.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/15f45f16d247b484e436e3d4d60df980.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/15f45f16d247b484e436e3d4d60df980.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/4b9e50ff9a14e86b60b01da5baa95c03.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/4b9e50ff9a14e86b60b01da5baa95c03.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/76e8066ae249014769452bfeb3dfca3b.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/76e8066ae249014769452bfeb3dfca3b.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/41ce17fd5a25b7ece82ff30eddce0a7c.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/41ce17fd5a25b7ece82ff30eddce0a7c.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/5cd4a0d780141db377a9326e48850ee5.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/5cd4a0d780141db377a9326e48850ee5.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/589f8e1ae0fd00c4e9e3d8fef348d10b.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/589f8e1ae0fd00c4e9e3d8fef348d10b.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/2268f96d3958c673fee25d74cef0933a.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/2268f96d3958c673fee25d74cef0933a.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/4756b6e40c463889dde37d3d63ce04d8.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/4756b6e40c463889dde37d3d63ce04d8.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/0c6195f8d9749e5935b199a8d04d3132.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/0c6195f8d9749e5935b199a8d04d3132.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/f196369fb66f2bfbe0569bd04398bbbd.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/f196369fb66f2bfbe0569bd04398bbbd.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/d1bd43830b256f63a83990e9ff8898db.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/d1bd43830b256f63a83990e9ff8898db.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/ddafcea83e22eb1ef9bc3e55e7af1a7f.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/ddafcea83e22eb1ef9bc3e55e7af1a7f.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/66bde96fe7c2c213a1cc669d3e57bb0b.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/66bde96fe7c2c213a1cc669d3e57bb0b.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/c727c23efe65bfa8d93e6620dcd1525b.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/c727c23efe65bfa8d93e6620dcd1525b.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/b88c649dcf572c6c1964277ed1677eab.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/b88c649dcf572c6c1964277ed1677eab.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/d8a288a0a350994a7e5ed6a873ef7d6f.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/d8a288a0a350994a7e5ed6a873ef7d6f.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/58e1ee4474489f834609c22f86a75af0.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/58e1ee4474489f834609c22f86a75af0.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/9105f41727b4ae6ad9d0c6df384a673c.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/9105f41727b4ae6ad9d0c6df384a673c.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/6d22195974e809581fce49733a5756c1.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/6d22195974e809581fce49733a5756c1.jpg"
                style=""
              />
            </p>
            <p>
              <img
                src="https://yanxuan-item.nosdn.127.net/b60db7555919371386137a8a7e8c338f.jpg?quality=75&amp;type=webp&amp;imageView"
                _src="https://yanxuan-item.nosdn.127.net/b60db7555919371386137a8a7e8c338f.jpg"
                style=""
              />
            </p>
            <p><br /></p>
          </div>
        </div>
      </div>
      <nut-backtop :bottom="80"></nut-backtop>
    </div>
    <!-- 底部动作栏 -->
    <van-action-bar style="z-index: 100">
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-button color="#7232dd" type="danger" text="立即购买" @click="base = true" />
      <van-action-bar-button color="#dd1a21" type="warning" text="加入购物车" @click="base = true" />
    </van-action-bar>
  </van-config-provider>
</template>

<script setup lang="ts">
import detailApi, { type detailData } from "@/api/detail";
import router from "@/router";
import { ref, watch, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import type { ConfigProviderThemeVars } from 'vant';
const time = ref(30 * 60 * 60 * 1000);
const showOne = ref(false);
const showTwo = ref(false);
const showFour = ref(false);
const showFive = ref(false);
const fieldValue = ref("");
const cascaderValue = ref("");
const route = useRoute();



const themeVars: ConfigProviderThemeVars = {
  navBarHeight: "1.1733rem",
  navBarTitleFontSize: ".5333rem",
  navBarBackground: "#fafafa",
  countDownFontSize: ".32rem",
  countDownTextColor: "#fafafa",
  imagePreviewOverlayBackground: "#fafafa",
  actionBarBackground: "#f4f4f4",
  actionBarIconBackground: "#f4f4f4",
};

// 选项列表，children 代表子选项，支持多级嵌套
const options = [
  {
    text: "浙江省",
    value: "330000",
    children: [{ text: "杭州市", value: "330100" }],
  },
  {
    text: "江苏省",
    value: "320000",
    children: [{ text: "南京市", value: "320100" }],
  },
];
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }: any) => {
  showFour.value = false;
  fieldValue.value = selectedOptions.map((option: any) => option.text).join("/");
};

// 四个弹出框 规格选择除外---------------------------
const showPopupOne = () => {
  showOne.value = true;
};
const showPopupTwo = () => {
  showTwo.value = true;
};
const showPopupThree = () => {
  base.value = true;
};
const showPopupFive = () => {
  showFive.value = true;
};

// NutUI - Sku商品规格选择
interface skuListModel {
  name: string;
  id: number;
  active: boolean;
  disable: boolean;
}
interface skuModel {
  id: number;
  name: string;
  list: skuListModel[];
}
interface goodsModel {
  skuId: string;
  price: string;
  imagePath: string;
}
interface dataModel {
  sku: skuModel[];
  goods: goodsModel;
}

const skuNumber = ref("1");
const skuIdd = ref("1");
const base = ref(false);
const data = reactive<dataModel>({
  sku: [],
  goods: {
    skuId: "",
    price: "",
    imagePath: "",
  },
});

const detailInfo = ref<detailData>();

const getDetailInfo = async () => {
  try {
    // 随机生成包含n但不包含m的n-m之间的正整数
    let n = 1;
    let m = 100;
    let randomId = parseInt((Math.random() * (m - n) + n) as any);

    // 获取params参数
    console.log(route.path.slice(0, 7));

    let routeId = route.params.id;
    // 获取路由params.id，有即使用，无即随机生成
    let goodsId;

    if (routeId) goodsId = routeId;
    else goodsId = randomId;

    const skuResult = await detailApi.getDetailData(`${goodsId}`);
    detailInfo.value = skuResult.data;

    skuIdd.value = `${skuResult.data.skuInfo.id}`;
    const { id, price, skuDefaultImg } = skuResult.data.skuInfo;
    const goodsObj = {
      skuId: `${id}`,
      price: `${price}`,
      imagePath: skuDefaultImg,
    };
    data.goods = goodsObj;
    skuResult.data.spuSaleAttrList.forEach((item) => {
      let { id, saleAttrName, spuSaleAttrValueList } = item;
      let SkuObj = {
        id,
        name: saleAttrName,
        list: [],
      };
      (spuSaleAttrValueList as any).forEach((spuItem: any, index: number) => {
        let spuObj = {
          name: spuItem.saleAttrValueName,
          id: spuItem.id,
          active: index == 0 ? true : false,
          disable: false,
        };
        (SkuObj as skuModel).list.push(spuObj);
      });
      data.sku.push(SkuObj);
    });
  } catch (error) {
    console.log(error);
  }
};
onMounted(() => {
  getDetailInfo();
});

// inputNumber 更改
const changeStepper = (count: number) => {
  skuNumber.value = `${count}`;
};

// 切换规格类目
const selectSku = (ss: any) => {
  const { sku, skuIndex, parentSku, parentIndex } = ss;
  if (sku.disable) return false;
  data.sku[parentIndex].list.forEach((s) => {
    s.active = s.id == sku.id;
  });
};
// 底部操作按钮触发
const clickBtnOperate = (op: { type: string; value: number }) => {
  if (op.type == "cart") {
    router.push({
      name: `Cart`,
      query: {
        skuId: skuIdd.value,
        skuNum: skuNumber.value,
      },
    });
  } else {
    // 跳转到结算页面
    router.push({
      name: `Cart`,
      query: {
        skuId: skuIdd.value,
        skuNum: skuNumber.value,
      },
    });
  }
};
</script>

<style lang="less" scoped>
.borderb {
  border-bottom: 1px solid #d9d9d9;
}

.fontColor-red {
  color: #dd1a21;
}

.mb-6 {
  margin-bottom: -0.16rem;
}

.mb--5 {
  margin-bottom: -5px;
}

.ht375 {
  height: 10rem;
}

element.style {
    color: rgb(255, 255, 255);
    min-height: .0267rem;
}

.m-processBanner .bannerContent .col1 .content .currentPrice {
    font-size: .7467rem;
    font-family: Gilroy-bold;
}

.m-processBanner .bannerContent .col1 .content .couterPrice {
    position: relative;
    color: #999;
    font-size: .3733rem;
    margin-left: .0533rem;
    color: #fff;
}

.m-processBanner .logoUrl {
    width: 2rem;
    height: 1.0667rem;
    margin-right: 0;
    display: inline-block;
    vertical-align: middle;
}

.m-processBanner .bannerContent .col1 .content {
    font-size: .7467rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

element.style {
    color: rgb(255, 255, 255);
}

.m-processBanner .bannerContent .col1 .head {
    font-size: .32rem;
    height: .48rem;
    margin-bottom: .1067rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.m-processBanner .bannerContent .col1 {
    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-top: .2133rem;
}

element.style {
    background-color: rgb(250, 30, 50);
}

.m-processBanner .bannerContent {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
    padding-left: .4rem;
}

.m-processBanner,
.m-processBanner .bannerContent {
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
}

.m-processBanner,
.m-processBanner .bannerContent {
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
}

.m-processBanner {
    height: 1.9733rem;
    font-family: PingFangSC-Regular;
}


// 商品详细信息
.m-detailBaseInfo {
    background: #fff;
    position: relative;
    padding: .3467rem 0 .48rem .4rem;
}

.m-detailBaseInfo .priceInfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.spmcBanner {
    margin: .16rem 0 .24rem;
    padding: 0 .2rem;
    width: 9.2rem;
    height: 1.0667rem;
    font-size: .32rem;
    font-weight: 600;
    line-height: 1.0667rem;
    background: #fff1d2;
    position: relative;
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.spmcBanner .spmcPrice {
    line-height: .48rem;
    overflow: hidden;
}

.spmcBanner .iconUrl {
    width: .56rem;
    height: .32rem;
    margin-right: .0267rem;
    display: inline-block;
    vertical-align: middle;
}

.spmcBanner .spmcDesc {
    line-height: .4267rem;
    color: #333;
    margin-left: .0533rem;
}

.spmcBanner .spmcEconomizePrice {
    font-family: PingFang SC;
    font-weight: 700;
    color: #dd1a21;
    font-size: .3733rem;
    line-height: .6933rem;
    margin-left: .0533rem;
}

.spmcBanner .icon-questionMark {
    position: relative;
    background-image: url(https://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/normal-1d164e96ac8a5c0e7ac39af8b1982304.png);
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background-size: 211px 144px;
    background-position: -174px -82px;
    margin-left: 2px;
    margin-top: -1.5px;
    z-index: 1;
}

.m-detailBaseInfo .baseInfo {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: .1867rem;
}

.m-detailBaseInfo .info {
    padding-right: .32rem;
    -webkit-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.m-detailBaseInfo .info .name {
    font-size: .4267rem;
    color: #333;
    line-height: .64rem;
    margin-bottom: .0533rem;
    font-weight: 700;
}

.m-detailBaseInfo .info .simpleBrandInfo {
    margin-top: .08rem;
    margin-bottom: .0667rem;
    height: .7467rem;
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
}

.m-detailBaseInfo .info .simpleBrandInfo .preLogo1 {
    width: .8533rem;
    height: .4267rem;
    margin-right: .1067rem;
    background: url(https://yanxuan.nosdn.127.net/6366944e4ac00118969787dedf9520e7.png) no-repeat;
    background-size: 100% 100%;
}

.m-detailBaseInfo .info .simpleBrandInfo .brandLogo {
    width: .3733rem;
    height: .3733rem;
    margin-right: .1067rem;
}

.m-detailBaseInfo .info .simpleBrandInfo .title {
    font-size: .32rem;
    line-height: .48rem;
    color: #7f7f7f;
    margin-right: .2133rem;
}

.m-detailBaseInfo .info .desc {
    font-size: .32rem;
    line-height: .48rem;
    color: #333;
    font-weight: lighter;
}

.m-detailBaseInfo .comment,
.m-detailBaseInfo .comment .wrap {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

.m-detailBaseInfo .comment {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
    width: 2.3733rem;
}

.m-detailBaseInfo .single-line {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
}

.m-detailBaseInfo .comment .wrap {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
    padding-left: .2667rem;
    text-align: center;
    font-size: .3733rem;
}

.m-detailBaseInfo .comment,
.m-detailBaseInfo .comment .wrap {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

.m-detailBaseInfo .comment .wrap .info-wrap .num {
    font-weight: 700;
    font-size: .4267rem;
    line-height: .6rem;
    color: #dd1a21;
    text-align: center;
}

.m-detailBaseInfo .comment .wrap .info-wrap .com {
    font-family: PingFangSC-Light;
    line-height: .48rem;
    font-size: .32rem;
    color: #7f7f7f;
}

.m-detailBaseInfo .comment .wrap .u-icon {
    background-image: url(https://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/arrow-dc528da35c384481e18b0291eaf8d6e7.png);
    display: inline-block;
    vertical-align: middle;
    width: .1333rem;
    height: .2533rem;
    background-size: 1.3413rem 1.1333rem;
    background-position: 0 -0.88rem;
    -webkit-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: .1867rem;
    margin-right: .32rem;
}

.m-detailBaseInfo .rcmdBanner {
    margin: .16rem 0 0;
    padding: .1867rem .2667rem;
    width: 9.2rem;
    border-radius: 4.0012px;
    line-height: .8rem;
    background: #fafafa;
    border: 1.0012px solid #e6e6e6;
    border-radius: .0533rem;
    position: relative;
}

.m-detailBaseInfo .rcmdBanner .angleContent,
.m-detailBaseInfo .rcmdBanner .angleTop {
    position: absolute;
    width: 0;
    height: 0;
    border-left: .12rem solid transparent;
    border-right: .12rem solid transparent;
}

.m-detailBaseInfo .rcmdBanner .angleTop {
    top: -0.12rem;
    left: .52rem;
    border-bottom: .12rem solid #e6e6e6;
    z-index: 1;
}

.m-detailBaseInfo .rcmdBanner .angleContent {
    top: .0133rem;
    left: .12rem;
    border-bottom: .12rem solid #fafafa;
    z-index: 2;
}

.m-detailBaseInfo .rcmdBanner li:not(:last-child) {
    margin-bottom: .0533rem;
}

.m-detailBaseInfo .rcmdBanner li {
    height: .48rem;
    line-height: .48rem;
    font-family: PingFangSC-Regular;
    font-size: .32rem;
    color: #333;
}

.spmcBanner .spmcBtn {
    height: .64rem;
    padding-left: .32rem;
    padding-right: 0.32rem;
    line-height: .64rem;
    background: #12161c;
    font-size: .32rem;
    text-align: center;
    color: #f3ca84;
    border-radius: .56rem;
}

.m-detailBaseInfo .rcmdBanner .key {
    display: inline-block;
    width: .32rem;
    height: .32rem;
    border: 1.0012px solid #dd1a21;
    border-radius: 50%;
    text-align: center;
    line-height: .32rem;
    font-size: .2667rem;
    color: #dd1a21;
    font-family: PingFang SC;
    font-weight: 700;
    margin-right: .08rem;
    vertical-align: middle;
}

.m-detailBaseInfo .rcmdBanner li .recommendReason {
    display: inline-block;
    height: .48rem;
    line-height: .48rem;
    vertical-align: middle;
}

.priceBox {
    height: 1.0667rem;
    width: 9.6rem;
}

.m-processBanner .bannerContent .col1 .content .couterPrice:before {
    background-color: #fff;
}

.m-processBanner .bannerContent .col1 .content .couterPrice:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    margin: auto;
}

// 商品详情图
.m-detailHtml {
    width: 100%;
}

.m-detailHtml img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

// 邮费弹出框
.popup2 .title,
.popup3 .title {
    height: 1.6rem;
    font-size: .4267rem;
    text-align: center;
    line-height: .64rem;
    padding: .4267rem;
    border-bottom: 1px solid #d9d9d9;
}

.popup2 .content,
.popup3 .content {
    padding: .6933rem .4rem;
    overflow-y: scroll;
    height: 8.4rem;
    -webkit-overflow-scrolling: touch;
}

.popup2 .ruleTitle,
.popup3 .ruleTitle {
    font-size: .3733rem;
    line-height: .3733rem;
    height: .3733rem;
    position: relative;
    margin-bottom: .2133rem;
}

.popup2 .rule,
.popup3 .rule {
    margin-top: 0.44rem;
}

.popup2 .rule:first-child,
.popup3 .rule:first-child {
    margin-top: 0;
}

.popup2 .ruleTitle span,
.popup3 .ruleTitle span {
    background-color: #dd1a21;
    margin: 3px 0;
}

.popup2 .ruleContent,
.popup3 .ruleContent {
    font-size: .3733rem;
    line-height: .56rem;
    color: #7f7f7f;
}

// ------------------------------
.custom-indicator {
    position: absolute;
    bottom: 0.5rem;
    padding: 0.01rem 0.06rem;
    right: 0.3rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 0.2rem;
    color: #333;
    background-color: #fff;
    border-radius: 4px;
}

// 商品弹出框
.PopupThree {
    zoom: 1;
    height: 99px;
    margin-bottom: 21px;
}

.PopupThree .right {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    -moz-align-items: flex-end;
    align-items: flex-end;
    line-height: 1;
    margin-left: 10px;
    margin-top: 35px;
}

.PopupThree .left,
.PopupThree .right {
    height: 100%;
}


.f-fl {
    float: left;
}

.PopupThree .right .tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.PopupThree .right .tags .tag {
    margin-left: 0;
    margin-right: 0;
}

.PopupThree .right .tag {
    margin-bottom: 4px;
    line-height: 15px;
}

.tag {
    margin-left: 7px;
    padding-right: 1.5px;
    position: relative;
    display: inline-block;
}

.w-tag-yellow {
    color: #fff;
    background-color: #f48f18;
}

.w-tag {
    border-radius: 4px;
    display: inline-block;
    padding: 0 4.5px;
    vertical-align: middle;
    line-height: 17px;
    font-size: 12px;
    color: #f48f18;
    border: 1px solid #f48f18;
}

.PopupThree .right .price {
    font-size: 14px;
    padding-bottom: 2px;
    line-height: 20px;
    color: #dd1a21;
}

.PopupThree .right .price .nowPrice {
    margin-left: 4px;
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
}

.PopupThree .right .sku {
    max-width: 235px;
    font-size: 14px;
    line-height: 20px;
}

.PopupThree .right .sku {
    overflow: hidden;
    word-wrap: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.PopupThree .right .sku .it {
    margin-right: 5px;
}
</style>
